<template>
  <a-drawer :open="visible" title="门店详情" @close="onClose">
    <template #closeIcon>
      <div class="express-bar"></div>
      <div class="express-btn">
        <CloseCircleOutlined :size="32" @click="onClose" />
      </div>
    </template>
    <a-card size="small" title="基本信息">
      <a-row>
        <a-col :span="20">
          <a-descriptions size="small" :column="3">
            <!-- <a-descriptions-item label="编号">{{ options.store_no }}</a-descriptions-item> -->
            <a-descriptions-item label="门店名称">{{ options.store_name }}</a-descriptions-item>
            <a-descriptions-item label="门店简称">{{ options.store_short_name }}</a-descriptions-item>
            <a-descriptions-item label="联系人">{{ options.contacts }}</a-descriptions-item>
            <a-descriptions-item label="联系电话">{{ options.phone }}</a-descriptions-item>
            <a-descriptions-item label="唯一识别号">{{ options.only_phone }}</a-descriptions-item>
            <a-descriptions-item label="所属片区">{{ options.region?.name }}</a-descriptions-item>
            <a-descriptions-item label="地址">{{ options.address }}</a-descriptions-item>
            <a-descriptions-item label="支付类型">{{ options.payment_type == 1 ? '现结' : '月结' }}</a-descriptions-item>
            <a-descriptions-item label="门店类型">{{ options.level?.level_name }}</a-descriptions-item>
            <a-descriptions-item label="渠道">{{ options.channel }}</a-descriptions-item>
            <a-descriptions-item label="排序">{{ options.sort }}</a-descriptions-item>
            <a-descriptions-item label="备注">{{ options.remark }}</a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="4">
          <a-image :width="100" :src="options.store_img" />
        </a-col>
      </a-row>
    </a-card>
    <template #footer>
      <a-button @click="onClose">取消</a-button>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'

defineExpose({
  showDrawer
})
const emit = defineEmits(['refresh'])

// --------------------- Drawer 显示与隐藏 ---------------------
// 是否展示
const visible = ref(false)
// 详情
const options = ref({})

function showDrawer(item) {
  options.value = item
  visible.value = true
}

const onClose = () => {
  visible.value = false
}
</script>
